<script setup>
import { reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router';
const appRouter = useRouter() // 路由

const menuData = reactive({
  currentActive: '1',
  data: [
    {
      index: '1',
      name: '价差套利',
      routerName: 'spreadArbitrage',
      routerPath: '/ftools/spreadArbitrage'
    },
    {
      index: '2',
      name: '持仓分析',
      routerName: 'positionAnalysis',
      routerPath: '/ftools/positionAnalysis'
    }
  ]
})

onMounted(() => {
  menuItemClick(menuData.data[0])
})

const menuItemClick = (menu) => {
  appRouter.replace({ name: menu.routerName, path: menu.routerPath })
}
</script>
<template>
  <div class="page-container">
    <div class="menu-box">
      <el-scrollbar>
        <el-menu
          unique-opened
          class="menu-view"
          :default-active="menuData.currentActive"
        >
          <el-menu-item
            v-for="cm in menuData.data"
            :key="cm.index"
            :index="cm.index"
            @click="menuItemClick(cm)"
          >
            {{ cm.name }}
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </div>
    <div class="right-view">
      <el-scrollbar>
          <div>
            <RouterView />
          </div> 
        </el-scrollbar>
    </div>
  </div>
</template>
<style scoped lang="scss">
.page-container {
  width: $content-width;
  height: calc(100vh - #{$navbar-height});
  display: flex;
  .menu-box {
    height: calc(100vh - #{$navbar-height});
    width: 220px;
    min-width: 220px;
    border-left: 1px solid #eee;
    .menu-view {
      height: calc(100vh - #{$navbar-height});
    }
  }
  .right-view {
    width: calc(#{$content-width} - 222px);
    min-width: calc(#{$content-width} - 222px);
    border-right: 1px solid #eee;
    background-color: #f2f2f2;
  }
}
</style>
